import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import APP from "@/components/Tool/BaseAPP";

/**
 * 官网 -> https://www.tiny.cloud
 * @Author 肖家添
 * @Date 2019/9/2 18:59
 */

/**
 * tinymce 富文本框组件
 * @Author 肖家添
 * @Date 2019/9/2 18:01
 */
class TinyMCEHandler extends Component {
  state = {
    key: 'o6fp4gpwuhct1tn5zjg7kg87dlwyn40pk8z89i5i2x4ad6cy',
    content: '',
  };

  componentDidMount() {
    //-- 初始化页面
    this.initPage();
  }
  constructor(props) {
    super(props);
    this.state.content = this.props.content;
  }

  /**
   * 初始化页面
   * @Author 肖家添
   * @Date 2019/8/23 17:01
   */
  initPage() {
    const { editor } = this.refs;
    this.editor = editor;

    const { onRef, parent } = this.props;
    if (APP.isValidObj(onRef)) {
      onRef(this);
    }
  }

  render() {
    const thisCtx = this;
    const { key, content } = this.state;

    return (
      <Editor
        apiKey={key}
        ref="editor"
        value={content}
        init={{
          language: 'zh_CN',
          height: '500px',
          //-- plugins -> [advcode]
          plugins: 'link table image imagetools importcss fullscreen',
          toolbar:
            'fullscreen | undo redo | alignleft aligncenter alignright alignjustify | forecolor bold italic underline strikethrough subscript superscript removeformat formats | link image | code',
          images_upload_handler: function(blobInfo, success, failure) {
            thisCtx.fileUpload(
              blobInfo.blob(),
              '10005',
              function(data) {
                success(data.datas.filePath);
              },
              function() {
                failure('图片上传失败');
              }
            );
          },
        }}
      />
    );
  }
}

export default TinyMCEHandler;
